import React, { useEffect, useRef } from 'react';
import DPlayer from 'dplayer';

import PublicHeader from '@/components/header';

export default function ArchivesPage() {
    const ref = useRef<HTMLDivElement | null>(null);
    useEffect(() => {
        const dp = new DPlayer({
            container: ref.current,
            autoplay: false,
            theme: '#FADFA3',
            loop: false,
            lang: 'zh-cn',
            screenshot: true,
            hotkey: true,
            preload: 'auto',
            logo: 'logo192.png',
            volume: 0.7,
            mutex: true,
            video: {
                url: 'dplayer.mp4',
                pic: 'dplayer.png',
                thumbnails: 'thumbnails.jpg',
                type: 'auto',
            },
            subtitle: {
                url: 'dplayer.vtt',
                type: 'webvtt',
                fontSize: '20px',
                bottom: '10%',
                color: '#b7daff',
            },
            danmaku: {
                id: '9E2E3368B56CDBB4',
                api: 'https://api.prprpr.me/dplayer/',
                token: 'tokendemo',
                maximum: '1000',
                addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
                user: 'DIYgod',
                bottom: '15%',
                unlimited: true,
                speedRate: 0.5,
            },
            contextmenu: [
                {
                    text: '用友科技所有',
                    link: 'https://github.com/DIYgod/DPlayer',
                },
                {
                    text: '查看源码',
                    click: (player: any) => {
                        // console.log(player);
                    },
                },
            ],
            highlight: [
                {
                    time: 5,
                    text: '这是第 5 秒',
                },
                {
                    time: 10,
                    text: '这是 10 秒',
                },
            ],
        });
        const danmaku = {
            text: 'Get a danmaku via WebSocket',
            color: '#fff',
            type: 'right',
        };
        dp.danmaku.draw(danmaku);
        return () => {
            dp.destroy();
        };
    }, []);

    return (
        <div className='container w-full h-full flex flex-col'>
            <PublicHeader title='公司介绍' record={false} confirm={false} />
            <div>亚洲领先的</div>
            <div className='w-full flex-1' ref={ref} />
        </div>
    );
}
